<template>
	<view>
		<view style="font-size: 36px;color: #FF0000; text-align: center; line-height: 160px;">
			￥{{bond_amount}}
		</view>
		<view class="box">
			<view class="list">
				<p>
					银行名称：
				</p>
				<input type="text" v-model="data.bank_name" placeholder="银行" disabled="disabled">
			</view>

			<view class="list">
				<p>
					姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：
				</p>
				<input type="text" v-model="data.username" placeholder="请输入姓名" disabled="disabled">
			</view>

			<view class="list">
				<p>
					银行卡号：
				</p>
				<input type="text" v-model="data.bank_code" placeholder="请输入银行卡号" disabled="disabled">
			</view>

			<view class="list">
				<p>
					开&nbsp;户&nbsp;行：
				</p>
				<input type="text" v-model="data.bank_deposit" placeholder="请输入开户行" disabled="disabled">
			</view>
			<br>
			<br>
			<br>
			<button v-if="title=='修改'&&name==''" @click="bond_apply()">申请退还</button>
			<button v-if="title=='修改'&&name!=''" @click="Freight_apply()">申请车费</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "修改",
				data: {
					username: "", //开户名称
					bank_name: "", //银行名称
					bank_code: "", // 银行卡号
					bank_deposit: "", //开户行
					id: ""
				},
				bond_apply_data: null,
				bond_amount: "", //保证金金额
				name: "", //申请车费
				confirmTips: "申请退还确认",

			}
		},
		onLoad(open) {
			console.log("open：", open)
			if (open.name) {
				this.name = open.name;
				uni.setNavigationBarTitle({
					//这是修改后的导航栏文字
					title: "申请车费"
				})
				this.confirmTips = "申请车费"
			}
			if (open.data != "") {
				//字符串转json
				var jsonObj = JSON.parse(open.data); //将JSON字符串转换为JSON对象
				this.data = jsonObj;
			}
			this.bond_amount = open.bond_amount;
			console.log(open)
		},
		methods: {
			//申请车费
			Freight_apply() {
				uni.showModal({
					title: '温馨提示', //提示标题
					content: this.confirmTips, //提示内容
					showCancel: true, //是否显示取消按钮
					success: (res) => {
						if (res.confirm) { //confirm为ture，代表用户点击确定
							let data = {
								waybill_id: this.data.id2,
								bank_id: this.data.id
							}

							this.$rqt.Freight_apply(data).then(res => {
								console.log(res);
								this.bond_apply_data = res;
								uni.showToast({
									title: res.msg,
									icon: "success",
									duration: 850
								});

								setTimeout(() => {
									uni.navigateBack({
										delta: 3, //返回层数，2则上上页
									})
								}, 850)
							})
						} else if (res.cancel) { //cancel为ture，代表用户点击取消
						}
					}
				})
			},
			//申请保证金
			bond_apply() {
				uni.showModal({
					title: '温馨提示', //提示标题
					content: this.confirmTips, //提示内容
					showCancel: true, //是否显示取消按钮
					success: (res) => {
						if (res.confirm) { //confirm为ture，代表用户点击确定
							let data = {
								id: this.data.id2,
								bank_id: this.data.id
							}

							this.$rqt.bond_apply(data).then(res => {
								console.log(res);
								this.bond_apply_data = res;
								uni.showToast({
									title: res.msg,
									icon: "success",
									duration: 850
								});

								setTimeout(() => {
									uni.navigateBack({
										delta: 3, //返回层数，2则上上页
									})
								}, 850)
							})
						} else if (res.cancel) { //cancel为ture，代表用户点击取消
						}
					}
				})

			},
			//修改银行卡
			bank_edit() {
				let data = {
					"id": this.data.id,
					"username": this.data.username,
					"bank_name": this.data.bank_name,
					"bank_code": this.data.bank_code,
					"bank_deposit": this.data.bank_deposit
				}
				this.$rqt.bank_edit(data).then(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						icon: "success",
						duration: 850
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1, //返回层数，2则上上页
						})
					}, 850);
				})
			}
		}
	}
</script>

<style scoped>
	.box>button {
		color: #fff;
		font-size: 18px;
		width: 90%;
		margin: 0 auto;
		height: 50px;
		font-weight: 600;
		background: #1890FF;
		box-shadow: 0px 0px 4px 0px rgba(204, 204, 204, 0.5);
		border-radius: 25px;
	}

	.list {
		height: 50px;
		line-height: 50px;
		display: flex;
		align-items: center;
	}

	.list>p {
		width: 100px;
		font-size: 18px;
		font-weight: 500;
	}

	.list>input {
		width: 80%;
		line-height: 50px;
		height: 50px;
		border-bottom: 1px solid #EEEEEE;
	}

	.box {
		overflow: hidden;
		padding-top: 20px;
		width: 90%;
		margin: 0 auto;
	}
</style>